import React, { useState, useMemo } from 'react';
import Base from './base';
import styles from '../styles/view.scss';

export default (props) => {
    const { property } = Base.getProps(props);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const obj = useMemo(() => ({}), []);
    const [value, setValue] = useState(Base.getInitValue(property, obj));

    property.setIsVisible = (v) => setIsVisible(v);
    property.setValue = (v) => setValue(v);

    if (!isVisible) return null;

    const { style } = property;

    const className = Base.getClassName(property, styles);

    return (<a href={value} target='_blank' rel="noopener noreferrer" className={className} style={style}><span>{value}</span></a>);
};